<template>
  <div class="call_phone" v-if="is_call_phone">
    <div class="container">
      <i class="el-icon-close" @click="close_promit"></i>
      <div class="call_container">
        <div class="visti">
          <p>选择拜访目的：</p>
          <el-select
            v-model="visitedPurpose"
            multiple
            collapse-tags
            style="margin-left: 20px;"
            placeholder="请选择"
            filterable
            allow-create>
            <el-option
              v-for="item in visited_purpose"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="doctor_info">
          <p>医院信息：</p>
          <div class="info">
            <div>
              <span>姓名：</span>
              <span>{{visited_specific_purpose.doctorName}}</span>
            </div>
            <div>
              <span>所属医院：</span>
              <span>{{visited_specific_purpose.hospitalName ? visited_specific_purpose.hospitalName : visited_specific_purpose.doctorHospital}}</span>
              <!-- <span>三级甲等</span> -->
            </div>
            <div>
              <span>联系方式：</span>
              <span style="cursor:pointer;" v-if="visited_specific_purpose.doctorContact.length > 1">
                <el-select v-model="phone" placeholder="请选择">
                  <el-option
                    v-for="item in visited_specific_purpose.doctorContact"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </span>
              <span v-else>{{visited_specific_purpose.doctorContact[0]}}</span>
            </div>
            <div>
              <span>科室：</span>
              <span>{{visited_specific_purpose.depart ? visited_specific_purpose.depart : visited_specific_purpose.doctorDept}}</span>
            </div>
            <div>
              <span>产品：</span>
              <span>{{visited_specific_purpose.productName}}</span>
            </div>
            <div>
              <span>上次拨打时间：</span>
              <span>{{visited_specific_purpose.recordTime}}</span>
            </div>
            <div>
              <span>上次通话状态：</span>
              <span>{{callStatus}}</span>
            </div>
            <div>
              <span>备注：</span>
              <span>{{visited_specific_purpose.memo ? visited_specific_purpose.memo : '暂无备注'}}</span>
            </div>
          </div>
        </div>
        <el-button class="submit" type="primary" icon="el-icon-phone-outline" :loading="loading"
                  @click="call_phone_contact(phone,visited_specific_purpose)">拨打电话
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations, mapState} from "vuex";
  import bus from "../assets/js/eventBus";
  import {checkPhoneNumber} from "../utils/validate";
  import {api, baseAjax} from '../api/api';

  export default {
    props: {
      is_call_phone: {
        type: Boolean,
      },
      visited_specific_purpose: {
        type: Object,
      },
      callStatus:{
        type:String
      }
    },
    data() {
      return {
        phone: '',
        visitedPurpose: [],
        visited_purpose: [
          {   //拜访目的
            id: '1',
            label: '招募医生'
          }, {
            id: '2',
            label: '分型：了解医生信息'
          }, {
            id: '3',
            label: '传递：影响医生观念'
          }, {
            id: '4',
            label: '处方：向医生推荐用药'
          }, {
            id: '5',
            label: '客情'
          }, {
            id: '6',
            label: '收病例'
          }, {
            id: '7',
            label: '医生召回'
          }, {
            id: '8',
            label: '活动邀请'
          }, {
            id: '9',
            label: '活动回访'
          }, {
            id: '10',
            label: '其他'
          }],
      }
    },
    computed: {
      ...mapState({
        'is_dial': state => state.calls.is_dial,
        'loading': state => state.calls.loading,
      })
    },
    created(){
      bus.$on('clearSelectedRes',()=>{
        this.phone = '',
        this.visitedPurpose = []
      })
    },
    methods: {
      //拨打电话
      ...mapMutations({
        phone_call: 'calls/callPhone',
        hang: 'calls/hang'
      }),
      call_phone_contact(item, info) {
        if (this.is_dial === false) {
          return false;
        } else {
          if(info.doctorContact.length > 1){
             this.phone = item;
          }else{
            this.phone = info.doctorContact[0];
          }
          this.$store.state.calls.selected_visited_purpose = this.visitedPurpose;
          this.$store.state.calls.doctorId = info.doctorId;
          this.$store.state.calls.selected_product_id = Number(info.productId);
          this.call_phone();
          bus.$emit('getDoctorId', info.doctorId)
        }
      },
      //拨打电话
      call_phone() {
        if (!this.phone) {
          this.$alert('请输入手机号');
          this.$store.state.calls.loading = false;
        } else if (!checkPhoneNumber(this.phone)) {
          this.$alert('请输入正确的手机号');
          this.$store.state.calls.loading = false;
        } else {
          this.$store.state.calls.loading = true;
          this.$store.state.calls.is_calling = true;
          this.phone_call(this.phone);
        }
      },
      //关闭弹窗
      close_promit() {
        this.visitedPurpose = [];
        this.phone = '';
        this.$emit('is_phone', false);
        this.$store.state.calls.loading = false;
        this.hang();
      }
    }
  }
</script>

<style lang="less" scoped>
  .call_phone {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1005;
    overflow:auto;

    .container {
      width: 600px;
      height: 600px;
      background-color: #FFF;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding-top: 60px;
      padding-left: 51px;
      padding-bottom:60px;
      padding-right:51px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2B3A4F;
      position: relative;
      box-sizing:border-box;

      .el-icon-close {
        position: absolute;
        top: 29px;
        right: 38px;
        cursor: pointer;
      }
      .call_container{
        // overflow:auto;
        height:100%;
        .visti {
          display: flex;
          align-items: center;
          margin-bottom: 32px;
        }

        .doctor_info {
          display: flex;

          p {
            margin-top: 0px;
            margin-right: 55px;
          }

          .info {
            div {
              margin-bottom: 19px;
            }

            /deep/.el-select {
              margin-bottom: 0px;
              width: 45%;
              .el-input{
                input{
                  height: 32px;
                }
                .el-input__suffix{
                  .el-input__suffix-inner{
                    .el-input__icon{
                      line-height:32px;
                    }
                  }
                }
              }
            }

            // div:nth-child(2){
            //   display:flex;
            //   justify-content:center;
            //   // span:last-child{
            //   //   display:inline-block;
            //   //   width:70px;
            //   //   height:20px;
            //   //   background-color:#3B7CFF;
            //   //   color:#FFF;
            //   //   border-radius:10px;
            //   //   font-size:14px;
            //   //   text-align:center;
            //   //   padding-top:1.5px;
            //   //   box-sizing:border-box;
            //   //   margin-left:7px;
            //   // }
            // }
          }
        }

        .submit {
          margin-left: 198px;
          margin-top: 27px;
          width: 132px;
          height: 47px;
          background-color: #3B7CFF;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFF;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          img {
            width: 25px;
            height: 25px;
            margin-right: 8px;
          }
        }
      }

      
    }
  }
</style>
